{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <script src="../../static/personal_center/js/echarts.js"></script>
    <link type="text/css" rel="stylesheet" href="../../static/personnel/TimeSelector/skin/jedate.css">
    <script type="text/javascript" src="../../static/personnel/TimeSelector/src/jedate.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 100%;height: 40px;line-height: 40px;border-bottom: #cfcfcf solid 1px;background: white;padding-left: 15px;">
        <div style="display: inline-block;vertical-align: top;height: 40px;">
            <label for="">起止时间：</label>
            <input type="text" style="width: 200px;border: #cfcfcf solid 1px;border-radius: 3px;display: inline-block;vertical-align: top;height: 30px;margin-top: 5px;" id="StartTime" placeholder="开始时间">
            <span>-</span>
            <input type="text" style="width: 200px;border: #cfcfcf solid 1px;border-radius: 3px;display: inline-block;vertical-align: top;height: 30px;margin-top: 5px;" id="EndTime" placeholder="结束时间">
        </div>
        <div style="display: inline-block;vertical-align: top;width: 100px;height: 40px;margin-left: 5px;">
            <button style="width: 100%;height: 30px;margin-top: 5px;border: #00a0e9 solid 1px;background: #00a0e9;color: white;line-height: 20px;border-radius: 3px;" onclick="RetrievingData()">
                <i class="iconfont icon-chaxun" style="color: white;"></i> 搜索
            </button>
        </div>
        <div style="display: inline-block;vertical-align: top;height: 40px;margin-left: 15px;float: right;text-align: center;width: 100px;">
{#            <span style="color: #0c6fd9;cursor: pointer;">年度统计</span>#}
{#            <span style="color: #0c6fd9;margin-left: 10px;cursor: pointer;">本月统计</span>#}
            <span style="color: #0c6fd9;margin-left: 10px;cursor: pointer;"><i class="iconfont icon-gengduo1" style="color: #00a0e9;"></i><a href="/personnel/VehicleReportDetail.html"> 详情</a></span>
        </div>
    </div>

    <div style="width: 100%;height: 95%;overflow: auto;">
        <div style="width: 98.5%;height: 40%;border: #cfcfcf solid 1px;background: white;margin-left: 0.8%;margin-top: 5px;">
            <div style="width: 100%;height: 35px;background: #BFEFFF;padding-left: 10px;line-height: 35px;">
                车辆使用情况统计
            </div>
            <div style="width: 100%;height: 88%;text-align: center;">
                <div id="main" style="height: 100%;padding-top: 15px;"></div>
            </div>
        </div>

        <div style="width: 100%;height: 58%;margin-top: 10px;">
            <div style="width: 33%;height: 100%;border: #cfcfcf solid 1px;background: white;display: inline-block;vertical-align: top;margin-left: 12px;">
                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;border-bottom: #cfcfcf solid 1px;background: #BFEFFF;">
                    司机出车记录统计
                </div>
                <div style="width: 100%;height: 90%;text-align: center;">
                    <div id="container" style="height: 100%"></div>
                </div>
            </div>

            <div style="width: 65%;height: 100%;border: #cfcfcf solid 1px;background: white;display: inline-block;vertical-align: top;margin-left: 5px;">
                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;border-bottom: #cfcfcf solid 1px;background: #BFEFFF;">
                    申请科室统计
                </div>
                <div style="width: 100%;height: 87%;">
                    <div id="bm_apply" style="height: 100%;"></div>
                </div>
{#                <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 10px;border-bottom: #cfcfcf solid 1px;background: #BFEFFF;">#}
{#                    用车人员统计#}
{#                </div>#}

            </div>
        </div>

    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/personnel/js/demo.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("SystemReport").style.display = "block";
            document.getElementById("VehicleApplicationReport").className = "add-nav-active";

        };
        var hyl_count = {{ hyl_count | safe }};
        var hdc_count = {{ hdc_count | safe }};
        var lwj_count = {{ lwj_count | safe }};
        var mz_count = {{ mz_count | safe }};
        var fl_data = {{ fl_data | safe }};
        var dep_list = {{ dep_list | safe }};
        var dep_number_list = {{ dep_number_list | safe }};
        MonthlyStatistics(fl_data);left_div(hyl_count, hdc_count, lwj_count, mz_count);bm_echart(dep_list, dep_number_list);

        function MonthlyStatistics(fl_data) {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: fl_data
                },
                grid:{ // 让图表占满容器
                  top:"50px",
                  left:"80px",
                  right:"80px",
                  bottom:"20px"
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            };
            option && myChart.setOption(option);
        }

        function left_div(hyl_count, hdc_count, lwj_count, mz_count) {
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var option;
            const data = genData();
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: data.legendData,
                    padding:[0,30,0,0]
                },
                series: [
                    {
                        name: '出车记录',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: data.seriesData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                    ]
            };

            function genData() {
                const legendData = ["胡友林", "胡道春", "刘文军", "马舟"];
                const seriesData = [
                    { name: '胡友林', value: hyl_count},
                    { name: '胡道春', value: hdc_count},
                    { name: '刘文军', value: lwj_count},
                    { name: '马舟', value: mz_count},
                ];

                return {legendData: legendData, seriesData: seriesData};
            }

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
            window.addEventListener('resize', myChart.resize);
        }

        function RetrievingData() {
            var start_time = document.getElementById("StartTime").value;
            var end_time = document.getElementById("EndTime").value;
            console.log(start_time, end_time)
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/personnel/VehicleReport.html");
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send("start_time=" + String(start_time) + "&end_time=" + end_time);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate)
                        MonthlyStatistics(JsonDate["data"]["fl_data"]);left_div(JsonDate["data"]["hyl_count"], JsonDate["data"]["hdc_count"], JsonDate["data"]["lwj_count"], JsonDate["data"]["mz_count"]);
                    }
                }
            };
        }

        // 部门申请统计图
        function bm_echart(dep_list, dep_number_list) {
            var chartDom = document.getElementById('bm_apply');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                xAxis: {
                    type: 'category',
                    data: dep_list,
                    axisLabel: {
                        rotate: 40
                    }
                },
                yAxis: {
                    type: 'value'
                },
                grid:{ // 让图表占满容器
                    top:"20px",
                    left:"80px",
                    right:"80px",
                    bottom:"50px"
                },
                tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                    trigger: 'axis',
                    backgroundColor: 'rgba(32, 33, 36,.7)',
                    borderColor: 'rgba(32, 33, 36,0.20)',
                    borderWidth: 1,
                    textStyle: { // 文字提示样式
                        color: '#fff',
                        fontSize: '12'
                    },
                    axisPointer: { // 坐标轴虚线
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }

                    },
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    }
                },
                series: [
                    {
                        data: dep_number_list,
                        type: 'bar'
                    }

                ]
            };
            option && myChart.setOption(option);
        }
    </script>
{% endblock %}
